/*
 * 面向属性的 CSS
 */

/* 布局方式 */
.dpflex { display: flex; }
.dpnone { display: none; }
.flex1 { flex: 1 }
.fdcolumn{ flex-direction: column;}
.fdspaceB{justify-content: space-between;}
.fdspaceA{justify-content: space-around;}
.fdjc{justify-content: center;}
.fw{flex-wrap: wrap;}
.ofs{overflow-y:scroll;}

/* 盒模型 */
.mt0 { margin-top: 0; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }
.mt60 { margin-top: 60px; }
.mt85 { margin-top: 85px; }

.mr16 { margin-right: 16px; } 
.mr12 { margin-right: 12px; } 
.mb16 { margin-bottom: 16px; }
.ml12 { margin-left: 12px; }
.ml10 { margin-left: 10px; }
.ml8 { margin-left: 8px; }

.pd16 { padding: 16px; }
.pl8 { padding-left: 8px; }
.pb77{margin-bottom: 77px;}

/* 字号 */
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f18 { font-size: 18px; }
.f24 { font-size: 24px !important; }

/* 伪类距离页面底部77px */
.mb77::after{
    content: '';
    height: 77px;
    display: block;
    width: 100%;
}
/* 100%宽 */
.w100{
    width: 100%;
}
/* 字体粗体 */
.fwb{
    font-weight: bold;
}
/* 字体颜色 */
.ztc{
    color: rgba(66, 148, 255);
}
.ztt{
    color: rgba(0, 0, 0, 0.4);
}
/* 内边距20px */
.p20{
    padding: 20px;
}
/* 内边距20px */
.p15{
    padding: 15px;
}
